<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="common/common :: common_head('学员注册页面')"></head>
<head>
    <link rel="stylesheet" th:href="@{/css/front/learner-register.css}">
</head>
<body>
<!-- 引入公共的导航部分 -->
<header th:include="common/common :: common_header('','学员注册页面')"></header>

<article>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6 left">

            </div>
            <!-- 右边表格部分 -->
            <div class="layui-col-md6 right">
                <div class="layui-card" >
                    <div class="layui-card-header">密码修改</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">旧密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="userPassword" name="userPassword" required  lay-verify="required" placeholder="请输入旧密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">新密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="password" name="password" required  lay-verify="required" placeholder="请输入用户密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label">确认密码</label>
                                <div class="layui-input-block">
                                    <input type="password" id="userPassword_" name="userPassword_" required  lay-verify="required" placeholder="请再次输入密码" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="update">立即修改</button>
                                    <button type="reset" class="layui-btn layui-btn-primary">重置表单</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</article>
</body>
</html>
<script>

    layui.use('form',function (){
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;

        form.on('submit(update)',function (data){
            if($("#password").val() === $("#userPassword_").val()){
                $.ajax({
                    url: '/user/updatePassWord',
                    method: 'post',
                    data: data.field,
                    dataType: 'JSON',
                    success: function (res){
                        if (res == 4){
                            layer.open({
                                type: 0,
                                area: '300px',
                                moveOut: false,
                                closeBtn: false,
                                shade: 0.8,
                                btn: ['去登陆页面'],
                                btnAlign: 'c',
                                content: `<div style="width: 100%;text-align: center">
                                        <h2>密码修改成功</h2>
                                      </div>`,
                                yes: function (){
                                    window.location.href = "/page/learnerLogin";
                                }
                            })
                        }    if (res == 1){
                            //密码错误
                            layer.msg("旧密码错误",{
                                time: 20000 , //如果20s后 没有操作，自动关闭
                                btn: ["我知道了"],
                                btnAlign: 'c',
                                shade: 0.5,
                                anim: 6,
                                yes: function (index, layero){
                                    //关闭弹框
                                    layer.close(index);
                                }
                            })
                        };
                    }
                },JSON);
            }else {
                layer.open({
                    type: 0,
                    area: '300px',
                    moveOut: false,
                    closeBtn: false,
                    shade: 0.8,
                    btn: ['我知道了'],
                    btnAlign: 'c',
                    content: `<div style="width: 100%;text-align: center">
                                <h2>对不起，两次密码不一致，请检查！</h2>
                              </div>`,
                })
            }

            return false;
        });
    });

</script>